<script>
export default {
  data() {
    return {
      active: 0,
      icon: {
        active: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.7GBrICZ8r5GrepghfkYLSQAAAA?rs=1&pid=ImgDetMain',
        inactive: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.7GBrICZ8r5GrepghfkYLSQAAAA?rs=1&pid=ImgDetMain'
      },
      icons: {
        active: 'https://pic.nximg.cn/file/20230213/10539202_220809301103_2.jpg',
        inactive: 'https://pic.nximg.cn/file/20230213/10539202_220809301103_2.jpg'
      },
      icong: {
        active: 'https://img.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
      },
      iconb: {
        active: 'https://pic.nximg.cn/file/20230213/10539202_220809301103_2.jpg',
        inactive: 'https://pic.nximg.cn/file/20230213/10539202_220809301103_2.jpg'
      },
      images: [
        'https://pic2.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
        'https://img.yzcdn.cn/vant/apple-3.jpg',
        'https://img.yzcdn.cn/vant/apple-4.jpg'
      ],
      areaList: {
        province_list: {
        110000: '北京市',
            120000: '天津市'
      },
      city_list: {
            110100: '北京市',
            110200: '县',
            120100: '天津市',
            120200: '县'
      },
      county_list: {
        110101: '东城区',
            110102: '西城区',
            110105: '朝阳区',
            110106: '丰台区',
        120101: '和平区',
            120102: '河东区',
            120103: '河西区',
            120104: '南开区',
            120105: '河北区',
        // ....
      }},
      selectedArea: [],
      cars: {},
      showToast: false,
      loadedProvinces: false,
      loadedCities: false,
      loadedCounties: false,
      flag:false,


    };
  },
  methods: {
    inage(active) {
      switch (active) {
        case 0:
          this.$router.push({ name: 'index' });
          break;
        case 2:
          this.$router.push({ name: 'reserve' });
          break;
        case 3:
          this.$router.push({ name: 'my' });
          break;
        default:
          break;
      }
    },
    details(car){
        localStorage.setItem("cars", JSON.stringify(car))
        this.$router.push({path:'/details', query: { car : car }})
    },
    goToGg(){
      this.$router.push('/collection')
    },
    onConfirm(area) {
      // 当用户点击完成按钮时触发
      console.log('用户确认选择的地址:', area);
      // 这里可以将选择的地址发送到后端或进行其他处理
    },
    onCancel() {
      // 当用户点击取消按钮时触发
      console.log('用户取消了选择');
      // 例如，你可以使用路由返回上一个页面
      this.$router.go(-1);
    },
    onChange(picker, values, index) {
      // 当选项改变时触发
      console.log('Picker 实例:', picker);
      console.log('当前选中的值:', values);
      console.log('当前列对应的索引:', index);
      // 可以根据用户选择动态加载下一级数据
      if (index === 0 &&!this.loadedCities) {
        // 当用户选择了省份时，加载该省份下的城市
        this.loadCities(values[0]);
        this.loadedCities = true;
      } else if (index === 1 &&!this.loadedCounties) {
        // 当用户选择了城市时，加载该城市下的区县
        this.loadCounties(values[1]);
        this.loadedCounties = true;
      }
    },
    async loadCities(provinceCode) {
      // 模拟异步请求城市数据
      const cities = await this.fetchData(`/api/cities?province=${provinceCode}`);
      this.areaList.city_list = cities;
    },
    async loadCounties(cityCode) {
      // 模拟异步请求区县数据
      const counties = await this.fetchData(`/api/counties?city=${cityCode}`);
      this.areaList.county_list = counties;
    },
    async fetchData(url) {
      // 这里可以使用 axios 或其他工具发送请求
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          const mockData = {
            // 模拟返回的数据
          };
          resolve(mockData);
        }, 1000);
      });
    },
    submitArea() {
      if (this.selectedArea.length === 3) {
        console.log('选择的地址：', this.selectedArea);
        // 这里可以添加提交地址的逻辑，例如将地址发送到后端等
      } else {
        this.showToast = true;
        setTimeout(() => {
          this.showToast = false;
        }, 2000);
      }
    },
    xialakuang(){
      this.flag = !this.flag
    },
    findFavorite(){
      this.axios.get(`http://localhost:10086/api/order/favorites/gatFavoritesAll/${this.user.userId}`).then(res=>{
      })

    },
    SCreen(){
      this.$router.push('/screen')
    },
    boxStyle(url) {
      return {
        'background-image': `url(${url})`,
        'background-size': '120px 100px', // 可以根据需要设置其他的背景属性，如背景大小、位置等
        'background-position': 'center',
        'background-repeat': 'no-repeat'
      };
    },
    shoucang(carId,isFavorite){
      console.log("收藏"+carId,isFavorite)
      if (isFavorite == 0) {
        const cars = {
          carId:carId,
          isFavorite:1,
          userId:this.user.userId
        }
        this.axios.put('http://localhost:10086/api/cars/cars/updateCar',cars).then(res=>{
          this.CarList()
        })
      }else {
        const cars = {
          carId:carId,
          isFavorite:0,
          userId:this.user.userId
        }
        this.axios.put('http://localhost:10086/api/cars/cars/updateCar',cars).then(res=>{
          this.CarList()
        })
      }



    },
    CarList(){
      this.axios.get("http://localhost:10086/api/cars/cars/getCarAll").then(res=>{
        if (res.data.code == 200) {
          this.cars = res.data.data
          console.log(this.cars)
        } else {
          this.$toast.fail('获取数据失败')
        }
      })

    }
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("currentUser"))
    if (this.user == null) {
      this.$message.error("请先登录")
      setTimeout(
          () => {
            this.$router.push({ name: 'login' });
          },
          1000
      )
    }
    this.address = this.user.address
    console.log(this.user)
    if (this.user == null) {
      this.$router.push({ name: 'login' });
    }
    this.findFavorite()
    this.CarList()

  }
};

</script>

<template>
  <div>

    <div class="d1" style="position:fixed;">
      <span class="s2">发现</span>
      <img @click="goToGg" class="t1" style="position: absolute" src="http://sq4f6kqu8.hn-bkt.clouddn.com/Lovenull.png?e=1737250512&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:r34wHXiylI19CNSMLhtE7Xt7Uwg=">
    </div>

    <div class="d1"></div>


    <div class="d2" >
      <h3 class="h1">第一次租车打五折</h3>
      <span class="s3">周五额外返现200元</span>
      <br/>
      <button class="b1">去租车</button>
    </div>


    <div class="d3" @click="SCreen" style=" position: relative;">
      <img class="t3"  src="http://sq5qizw6e.hn-bkt.clouddn.com/s1.png">
      <span class="s1" >搜索汽车</span>
      <img class="t4" src="http://sq5qizw6e.hn-bkt.clouddn.com/t1.png">
    </div>

    <van-grid clickable :column-num="4" style="display: flex; flex-wrap: nowrap; justify-content: space-between;">
      <van-grid-item icon="https://img.ixintu.com/download/jpg/201912/da4d9fc3ffd97234d6f9211f74fa019c.jpg!con" text="法拉利" to="/brandAndCar?carId=3&carName=法拉利"
                     style="flex: 1; background-color: #f0f0f0;  border-radius: 5px; margin: 5px;text-align: center;" />
      <van-grid-item icon="https://img1.bitauto.com/appimage-630-w1/news/2022/07/01/82433d0653b64224b7214a6ae2ec9aa1.jpg" text="福特" to="/brandAndCar?carId=6&carName=福特"
                     style="flex: 1; background-color: #f0f0f0;  border-radius: 5px; margin: 5px;  text-align: center;" />
      <van-grid-item icon="https://ts1.cn.mm.bing.net/th/id/R-C.81d17c4c0089aed66b3ee6028503bc8d?rik=Yx%2fWIUxeAfezmA&riu=http%3a%2f%2flogo.16888.com%2flogoimage%2f20075618525119.jpg&ehk=PUJVsYh07ot6uH6UPKTbvBRQ%2bpo4jB6L5ga%2b0ivKhsA%3d&risl=&pid=ImgRaw&r=0" text="宝马" to="/brandAndCar?carId=7&carName=宝马"
                     style="flex: 1; background-color: #f0f0f0;  border-radius: 5px; margin: 5px;  text-align: center;" />
      <van-grid-item icon="https://img.ixintu.com/upload/jpg/20210522/b8aa521559c6b3cac83c79ba84ad4ee2_61630_800_800.jpg!ys" text="五菱宏光" to="/brandAndCar?carId=5&carName=五菱宏光"
                     style="flex: 1; background-color: #f0f0f0;  border-radius: 5px; margin: 5px;  text-align: center;" />
    </van-grid>



    <div class="car-section">
      <h4>可用的车</h4>
      <div  class="car-list">
        <div @click="details(car)"  v-for="(car, index) in cars" :key="index" class="car-item">
          <div :style="boxStyle(car.imageUrl)" style="width: 120px;height: 100px">
            <img @click.stop="shoucang(car.carId,car.isFavorite)"  v-if="car.isFavorite==0"  style="position: relative; margin-top: 0px; margin-left: 100px; width: 20px;height: 20px" src="http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/Lovenull.png?e=1737255146&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:yu6Xduz8_A_ENt0AbJ5R2nvPYgk=">
            <img @click.stop="shoucang(car.carId,car.isFavorite)"  v-if="car.isFavorite==1" style="position: relative; margin-top: 0px; margin-left: 100px; width: 20px;height: 20px" src="http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/love.png?e=1737255201&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:aJpokByV4d5CkHa9XvtnnFkLDkU=">
            <!--            <img  :src="car.imageUrl" :alt="car.name" class="car-image">-->
          </div>
          <div class="car-info">
            <span class="car-name">{{ car.carModel }}</span>
            <span class="car-price">￥{{ car.pricePerHour }}/小时</span>
          </div>
          <van-icon name="heart-o" class="favorite-icon" />
        </div>
      </div>
    </div>
    <div class="recommended-section">
      <h4>高档车推荐</h4>
      <div  class="car-list">
        <div @click="details(car)"  v-for="(car, index) in cars" :key="index" class="car-item">
          <div :style="boxStyle(car.imageUrl)" style="width: 120px;height: 100px">
            <img @click.stop="shoucang(car.carId,car.isFavorite)"  v-if="car.isFavorite==0"  style="position: relative; margin-top: 0px; margin-left: 100px; width: 20px;height: 20px" src="http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/Lovenull.png?e=1737255146&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:yu6Xduz8_A_ENt0AbJ5R2nvPYgk=">
            <img @click.stop="shoucang(car.carId,car.isFavorite)"  v-if="car.isFavorite==1" style="position: relative; margin-top: 0px; margin-left: 100px; width: 20px;height: 20px" src="http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/love.png?e=1737255201&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:aJpokByV4d5CkHa9XvtnnFkLDkU=">
            <!--            <img  :src="car.imageUrl" :alt="car.name" class="car-image">-->
          </div>
          <div class="car-info">
            <span class="car-name">{{ car.carModel }}</span>
            <span class="car-price">￥{{ car.pricePerHour }}/小时</span>
          </div>
          <van-icon name="heart-o" class="favorite-icon" />
        </div>
      </div>
    </div>
    <van-loading size="24px">加载中...</van-loading>
    <div class="recommended-section">
      <div class="car-list">
        <div v-for="(car, index) in cars" :key="index" class="car-item">
          <!--          <img :src="car.image" :alt="car.name" class="car-image">-->
          <div class="car-info">
            <!--            <span class="car-name">{{ car.name }}</span>-->
            <!--            <span class="car-price">{{ car.price }}</span>-->
          </div>
          <van-icon name="heart-o" class="favorite-icon" />
        </div>
      </div>
    </div>




    <!-- 底部导航栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item @click="inage(active)">
        <span>首页</span>
        <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? icon.active : icon.inactive"
        />
      </van-tabbar-item>

      <van-tabbar-item @click="inage(active)" icon="search">
        <span>附近</span>
        <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? icons.active : icons.inactive"
        />

      </van-tabbar-item>


      <van-tabbar-item @click="inage(active)" icon="gem">
        <span>我的预定</span>
        <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? icong.active : icong.inactive"
        />
      </van-tabbar-item>
      <van-tabbar-item @click="inage(active)" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>




</template>

<style>
@import "./rearby.css";
</style>